// 面板组件
import { FC } from "react";
import { useNavigate } from "react-router-dom";
// 引入资源
import styles from './styles.module.scss'

import { newGood } from "../../api/Panel/type";

interface Props {
    flag: number//1-新鲜好物；2-人气推荐;3-热门品牌
    title?: string,
    subTitle?: string,
    PanelGoods: newGood[],
    children?: React.ReactNode; // 添加 children props
}



const Panel: FC<Props> = (props) => {

    const { flag, PanelGoods, title, subTitle, children } = props
    // 路由跳转
    const Navigate = useNavigate()

    // 跳转商品详细

    const goToGoodsInfo = (id: string) => {
        Navigate(`/product?id=${id}`, {
            replace: false
        })
    }

    return (
        <div className={styles.Panel}>
            <div className={styles.title}>
                <span>{title}</span>
                <span>{subTitle}</span>
                {children}
            </div>
            <div className={styles.content}>
                {
                    PanelGoods.map((good) => {
                        if (flag === 1) {
                            return (
                                <li key={good.id} className={styles.newGoods} onClick={() => {
                                    goToGoodsInfo(good.id)
                                }}>
                                    <img src={good.picture} alt="" />
                                    <div>
                                        <span>{good.name}</span>
                                        <span>￥{good.price}</span>
                                    </div>
                                </li>
                            )
                        }
                        else if (flag === 2) {
                            return (
                                <li key={good.id} className={styles.recommend}>
                                    <img src={good.picture} alt="" />
                                    <div>
                                        <span>{good.title}</span>
                                        <span style={{ color: 'gray' }}>{good.alt}</span>
                                    </div>
                                </li>
                            )
                        }
                        else if (flag === 3) {
                            return (
                                <li key={good.id} className={styles.hotBrand}>
                                    <img src={good.picture} alt="" />
                                </li>
                            )
                        }
                    })
                }



            </div>
        </div>
    )
}

export default Panel